/**
 * @description 登录页面对应的属性组件
 */
import React, { useEffect, useMemo, useState, useContext, useRef } from 'react'
import { Collapse, Form, Select, Input, Radio } from 'antd';

import AnimateOptions from '@/components/StylesWrapper/AnimateOptions.js';
import { setAttrForm } from '@/utils/AttrForm';

import { FlagOptions } from '@/utils/Const';
import { UpdateContext } from '@/store/updateContext';

import FileUpload from '@/components/StylesWrapper/FileUpload';

import CssEdit from '@/components/Monaco/CssEidt';
import AttrHeaderBtn from '../components/AttrHeaderBtn';


import StyleModule from '@/utils/StyleModule';
import { copyTemplate, pasteTemplate_2026 } from '@/utils/clipboard';

// 背景类型的选项
const bgOptions = [
  {
    value: '1',
    label: '默认背景',
  },
  // {
  //   value: '2',
  //   label: '动画背景',
  // },
  // {
  //   value: '3',
  //   label: '视频背景',
  // },
  // {
  //   value: '4',
  //   label: '轮播背景',
  // },
]

// 表单布局
const layoutOption = [
  {
    value: 'horizontal',
    label: '水平'
  },
  {
    value: 'vertical',
    label: '垂直'
  },
]

// 标题和后缀现实的开关
const titleShowOptions = [
  {
    label: '开',
    value: true
  },
  {
    label: '关',
    value: false
  }
]





function RegisterAttr({ template2, onConfigEvent, setIsRightAttr, actKey }) {

  const updateCtx = useContext(UpdateContext)
  const [form] = Form.useForm()
  // css编辑器
  const [open, setOpen] = useState(false)
  // css编辑器实例
  const cssEditRef = useRef()


  // 组件css变化
  let cssChange = (value) => {
    form.setFieldValue('css', value)
    StyleModule.update(actKey, value)
  }

  // 头部按钮事件
  let handleHeaderEvent = (key) => {
    switch (key) {

      // 打开组件css编辑
      case 'css':
        setOpen(true)
        break;

      // 复制模板
      case 'copy':
        copyTemplate(actKey, [], form)
        break;

      // 黏贴模板
      case 'paste':
        pasteTemplate_2026(form, onConfigEvent, actKey)
        updateCtx.setUpdateFlag(pre => !pre)

        // 修改css编辑器的值
        cssEditRef.current.setValue(form.getFieldValue('css'))
        break;

      // 切换位置
      case 'position':
        setIsRightAttr((isRight) => !isRight)
        break;

      default:
        break;
    }
  }
  // -----------------------------------
  // 构造折叠面板的数据
  // -----------------------------------
  let items = useMemo(() => {
    const items = [
      {
        key: 'bg',
        label: '背景',
        children: <>
          <Form.Item
            label="背景类型"
            name={['base', 'bg_type']}
          >
            <Select
              options={bgOptions}
            >
            </Select>
          </Form.Item >
          <FileUpload form={form} label='背景图片' name={['base', 'background_image']} onConfigEvent={onConfigEvent} />

        </>,
      },
      {
        key: 'form',
        label: '表单盒子',
        children:
          (
            <>
              <Form.Item
                label="动画属性"
                name={['base', 'form_animate']}
              >
                <Select
                  allowClear
                  options={AnimateOptions}
                  onChange={(value) => onConfigEvent(['base', 'form_animate'], value)}
                />
              </Form.Item>
              <Form.Item
                label="布局"
                name={['base', 'form_layout']}
              >
                <Radio.Group
                  options={layoutOption}
                  onChange={(e) => onConfigEvent(['base', 'form_layout'], e.target.value)}
                  optionType="button"
                  buttonStyle="solid"
                />
              </Form.Item>

            </>

          )
        ,
      },

      {
        key: 'title',
        label: '标题',
        children:
          <>

            <Form.Item
              label="开关"
              name={['base', 'title_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'title_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="后缀"
              name={['base', 'title_suffixFlag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'title_suffixFlag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item
              label="后缀文字"
              name={['base', 'title_suffix']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'title_suffix'], e.target.value)}
              />
            </Form.Item>


          </>
      },
      {
        key: "input",
        label: "输入框",
        children:
          <Collapse accordion size='middle' items={[

            {
              key: 'label',
              label: '标签',
              children:
                <>
                  <Form.Item
                    label="开关"
                    name={['base', 'label_flag']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['base', 'label_flag'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item>

                  <Form.Item
                    label="冒号开关"
                    name={['base', 'colon_flag']}
                  >
                    <Radio.Group
                      options={FlagOptions}
                      onChange={(e) => onConfigEvent(['base', 'colon_flag'], e.target.value)}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </Form.Item>


                </>
            },


          ]} />
      },
      {
        key: 'btn',
        label: '按钮',
        children:
          <>
            <Form.Item
              label="注册文本"
              name={['base', 'register_text']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'register_text'], e.target.value)}
              />
            </Form.Item>
            <Form.Item
              label="登陆文本"
              name={['base', 'login_text']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'login_text'], e.target.value)}
              />
            </Form.Item>

          </>
      },
      {
        key: 'idea_1',
        label: '自定义盒子',
        children:
          <>
            <Form.Item
              label="盒1开关"
              name={['base', 'idea1_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'idea1_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>
            <Form.Item
              label="盒1文本"
              name={['base', 'idea1_text']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'idea1_text'], e.target.value)}
              />
            </Form.Item>

            <Form.Item
              label="盒2开关"
              name={['base', 'idea2_flag']}
            >
              <Radio.Group
                options={titleShowOptions}
                onChange={(e) => onConfigEvent(['base', 'idea2_flag'], e.target.value)}
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>
            <Form.Item
              label="盒2文本"
              name={['base', 'idea2_text']}
            >
              <Input
                onChange={(e) => onConfigEvent(['base', 'idea2_text'], e.target.value)}
              />
            </Form.Item>


          </>
      },
    ]
    return items
  }, [
    updateCtx.updateFlag
  ])


  useEffect(() => {
    setAttrForm(form)
  }, [form])

  return (
    <>

      <Form
        name='register'
        form={form}
        initialValues={template2}
        labelCol={{
          span: 6,
        }
        }
        autoComplete="off"
        spellCheck="false"
      >

        {/* 按钮区域 */}
        <AttrHeaderBtn onClickEvent={handleHeaderEvent} />

        {/* 对象形式的样式编辑 */}
        <Collapse accordion destroyInactivePanel size='middle' items={items} />


      </Form>

      {/* 字符串形式的样式编辑 */}
      <CssEdit value={template2.css} open={open} onValueChange={cssChange} setOpen={setOpen} ref={cssEditRef} />

    </>

  )
}
export default React.memo(RegisterAttr) 